<!--
  政策信息管理页面
-->
<template>
  <div>

    <div class="header">
      <el-page-header @back="goBack" content="政策文件管理"></el-page-header>

      <el-row>
      <!--发布政策信息按钮-->
        <el-button type="primary" @click="addFile()">添加政策信息</el-button>
      </el-row>
    </div>

    <!-- 已发布政策信息表 -->
    <div>
      <el-table
        :data="policy"
        stripe
        v-loading="loading"
        border
        style="width: 100%;margin-top: 30px;"
        height="560">
        <el-table-column prop="id" label="编号" width="80"></el-table-column>
        <el-table-column prop="title" label="政策标题"  ></el-table-column>
        <el-table-column prop="createDate" label="发布时间" ></el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="scope">
            <el-button type="primary" @click="lookFile(scope.row)">查看</el-button>
            <el-button type="danger" @click="deleteFile(scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>


    </div>


    <!-- 发布政策信息弹窗 -->
    <el-dialog :visible.sync="addPolicy" width="90%">
      <div class="dialog-style">
        <div>
          <h3>政策发布</h3>
          <el-divider></el-divider>
          <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <el-row>
              <el-col :span=12 :push=6>
                <el-form-item label="政策标题">
                  <el-input v-model="form.title" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span=12 :push=6>
                <el-form-item label="内容">
                  <el-input type="textarea" v-model="form.content" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!--附件上传-->
            <el-row>
              <el-col :span=4 :push=6>
                <el-form-item label="附件上传">
                  <el-upload class="upload"
                             action="http://39.104.21.116:8989/record/uploadFile"
                             :on-preview="handlePreview"
                             :on-remove="handleRemove"
                             :before-remove="beforeRemove"
                             :on-success="uploadSuccess"
                             multiple
                             :limit="3"
                             auto-upload
                             :on-exceed="handleExceed"
                             :file-list="fileList">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">文件大小不超过10MB</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span=6 :push=6>
                <el-form-item>
                  <el-button @click="commitForm" type="primary">确 认</el-button>
                </el-form-item>
              </el-col>
              <el-col :span=6 :push=4>
                <el-form-item>
                  <el-button @click="cancelCommit" type="danger">取 消</el-button>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>
      </div>
    </el-dialog>

    <!-- 查看已发布政策信息详情弹窗 -->
    <el-dialog :visible.sync="lookPolicy" width="90%">
      <div class="dialog-style">
        <h3>政策详情</h3>
        <el-divider></el-divider>
        <el-table
          :data="lookForm"
          stripe
          border
          style="width:800px;left:20%;" v-loading="load">
          <el-table-column prop="title" label="政策标题" width="400px" align="center"></el-table-column>
          <el-table-column prop="createDate" label="发布时间" width="399px" align="center"></el-table-column>
        </el-table>

        <el-table
            :data="lookForm"
            stripe
            border
            style="width:800px;margin-top: 1px; left:20%;">
            <el-table-column prop="content" label="正文" align="center" ></el-table-column>
          </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="closeView">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import instance from "../../../utils/request";
    export default {
      name: "Policy",
      data(){
          return{
            //发布政策信息弹窗开闭控制变量
            addPolicy:false,
            //查看已发布政策信息详情弹窗开闭控制变量
            lookPolicy:false,
            //已发布政策信息表数据加载动画开闭控制变量
            loading:true,
            //查看已发布政策信息详情弹窗数据加载动画开闭控制变量
            load:true,
            //已发布政策信息数据存储数组
            policy:[
            ],
            //查看政策信息详情数据存储数组
            lookForm:[
            ],
            //发布政策信息数据存储对象
            form: {
            },
            //政策文件存储数组
            fileList:[],
          }
      },
      //执行已发布政策信息数据获取方法
      created() {
        this.getDate();
      },

      methods:{
        //页面加载方法，获取已发布政策信息
        getDate() {
          this.loading=true;
          let _this = this;
          instance.get('/api/notice/').then(function (res) {
            console.log(res);
            if(res.data.code === 200){
              //数据处理逻辑
              console.log(res);
              _this.policy = res.data.data;
              _this.loading = false;
              console.log(_this.policy);
            }
            else if(res.data.code === 208){
              alert('信息不存在');
            }
            else {
              alert('失败');
            }
          }).catch(function (err) {
            console.log(err);
            alert('出错了！');
          });
        },
        //关闭查看政策详细信息方法
        closeView()
        {
          this.lookPolicy=false;
          //清空表单数据
          this.lookForm=[];
          //打开数据加载动画
          this.load=true;
        },
        //打开发布政策信息弹窗
        addFile(){
          this.addPolicy=true;
        },
        //获取当前选中政策详细信息方法
        lookFile(row){
          let _this = this;
          let id=row.id;
          instance.get("/api/notice/preview/" + id).then(function (res){
            if (res.data.code === 200){
              _this.lookForm.push(res.data.data);
              console.log(_this.lookForm);
              _this.load=false;
            }
            else{
              alert("失败");
            }
          }).catch(function (err) {
            console.log(err);
          })
          this.lookPolicy=true;
        },

        //已发布政策信息表数据删除方法
        deleteFile(row){
          let id =row.id;
          let _this = this;
          //发请求参数crowid
          instance.post("/api/notice/delete/" + id).then(function (res){
            if (res.data.code === 200){
              alert('删除成功！');
              _this.getDate();
            }
            else{
              alert("删除失败！");
            }
          }).catch(function (err) {
            console.log(err);
          })
          //重新加载
        },
        onSubmit() {
          console.log('submit!');
        },
        //移除文件方法
        handleRemove(file, fileList) {
          this.form.attachFile='';
        },
        //文件预览方法
        handlePreview(file) {
          console.log(file);
        },
        //文件超限方法
        handleExceed(files, fileList) {
          this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        //移除之前方法
        beforeRemove(file, fileList) {
          return this.$confirm(`确定移除 ${ file.name }？`);
        },
        //上传成功提示方法
        uploadSuccess(response, file, fileList){
          if (response.code === 200) {
            this.isShowFile = true;
            console.log(response);
            var temp = response.data;
            this.form.attachFile = temp;
            return this.$message.success("上传成功！");
          }else {
            return this.$message.error('上传失败，请重试！');
          }
        },
        //政策信息发布表单数据提交方法
        commitForm(){
          let _this = this;
          instance.post('/api/notice/add',{
            title:_this.form.title,
            content:_this.form.content,
            filePath:_this.form.attachFile
          }).then(function (res) {
            if(res.data.code === 200){
              alert('添加成功');
              _this.addPolicy = false;
              _this.fileList = [];
              _this.form = {};
              _this.getDate();
            }
            if(res.data.code === 201){
              alert('添加失败，请重试');
            }
          }).catch(function (err) {
            console.log(err);
            alert('出错啦');
          });
        },
        //取消提交方法
        cancelCommit(){
          this.addPolicy = false;
        }

      }

    }
</script>

<style scoped>
.header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header>span {
  color: #03a9f4;
}
</style>
